<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :lower-threshol="150"
                 :style="{'height': '100%'}">

      <div class="section card_section"
           v-if="card_length>0">
        <div class="header clearfix">
          <div class="left">
            <div class="icon">
              <img :src="base_url+'/mp_2.4/card/ka.png'"
                   v-if="base_url"
                   alt=""
                   class="img">
            </div>
            <div class="msg">卡({{card_length}})</div>
          </div>

        </div>
        <ul class="card-list clearfix">
          <i-swipeout i-class="i-swipeout-demo-item"
                      :operateWidth="64"
                      v-for="(item, index) in card_arr"
                      :key="index">
            <view slot="content">
              <li class="list-item"
                  :class="{
                'super-vip':item.card_type==0||item.card_type==5,
                'project':item.card_type==1,
                'friends':item.card_type==2,
                'partner':item.card_type==3,
                'black-gold':item.card_type==4
                }">
                <div class="title">
                  <div class="msg">
                    {{item.card_type==0||item.card_type==5?'超级会员卡':''}}
                    {{item.card_type==1?'项目卡':''}}
                    {{item.card_type==2?'亲友卡':''}}
                    {{item.card_type==3?'加盟卡':''}}
                    {{item.card_type==4?'黑金卡':''}}
                  </div>
                  <div class="line"></div>
                  <div class="logo">
                    <img :src="base_url+'/mp_2.4/card/logo.png'"
                         v-if="base_url"
                         mode="widthFix"
                         alt=""
                         class="img">
                  </div>
                </div>
                <div class="price">
                  <span class="icon">￥</span>
                  <span class="num">{{item.price}}</span>
                </div>
                <div class="status-icon">
                  <img :src="base_url+(item.card_status==1?'mp_2.4/card/yishiyong.png':'mp_2.4/card/yiguoqi.png')"
                       v-if="base_url"
                       mode="widthFix"
                       class="img">
                </div>
              </li>
            </view>
            <view slot="button"
                  class="i-swipeout-demo-button-group"
                  @tap="delete_item ({ type:1, item })">
              <img :src="base_url+'/mp_2.4/card/shanchu.png'"
                   v-if="base_url"
                   mode="widthFix"
                   alt=""
                   class="img-icon">
            </view>
          </i-swipeout>

        </ul>
      </div>
      <div class="section ticket_section"
           v-if="ticket_length>0">
        <div class="header clearfix">
          <div class="left">
            <div class="icon">
              <img :src="base_url+'/mp_2.4/card/youhuiquan-2@2x.png'"
                   v-if="base_url"
                   alt=""
                   class="img">
            </div>
            <div class="msg">优惠券({{ticket_length}})</div>
          </div>

        </div>
        <ul class="ticket-list clearfix">
          <i-swipeout i-class="i-swipeout-demo-item"
                      :operateWidth="64"
                      v-for="(val, key) in ticket_arr"
                      :key="key">
            <view slot="content">
              <li class="list-item"
                  :class="{'used':val.ticket_status==1,'expire':val.ticket_status==2}">
                <div class="left-detail">
                  <div class="left"
                       v-if="val.dedicated_status!=1">
                    <div class="price">￥{{val.type_money}}</div>
                    <p class="tip">{{val.type_name}}</p>
                  </div>
                  <div class="left"
                       v-if="val.dedicated_status==1">
                    <div class="special">
                      <p class="tip-t">预约</p>
                      <p class="tip-b">专用券</p>
                    </div>
                  </div>
                  <div class="right clearfix">
                    <div class="name clearfix">
                      <div class="type">
                        现金券
                      </div>
                      <div class="ticket-name">{{val.source}}</div>
                    </div>
                    <div class="descript">
                      <div>可在<span class="tip">{{val.condtion==1?'品质医美':'积分商城'}}</span>中使用</div>
                      <div>{{val.content}}</div>
                    </div>
                    <div class="date">
                      {{val.start}}~{{val.end}}
                    </div>
                  </div>
                </div>
                <div class="right-btn">
                  <div class="msg"
                       v-if="val.ticket_status==1">
                    已使用
                  </div>
                  <div class="msg"
                       v-if="val.ticket_status==2">
                    已过期
                  </div>
                  <ul class="icon clearfix">
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                  </ul>
                </div>
              </li>
            </view>
            <view slot="button"
                  class="i-swipeout-demo-button-group"
                  @tap="delete_item ({ type:2, item:val })">
              <img :src="base_url+'/mp_2.4/card/shanchu.png'"
                   v-if="base_url"
                   mode="widthFix"
                   alt=""
                   class="img-icon">
            </view>
          </i-swipeout>
        </ul>
      </div>
    </scroll-view>
    <div class="empty"
         v-if="card_length==0&&ticket_length==0">
      <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nojuan.png"
           v-if="base_url"
           alt=""
           class="nothing">
      <div class="text">暂时没有失效的卡券哟～</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      card_length: "",
      ticket_length: "",
      card_arr: [],
      ticket_arr: []
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "失效卡券"
    });
  },
  onShow () {
    this.get_data()
  },
  methods: {
    get_data () {
      common.fly_post('/api/v4_2/card_ticket/card_failure', { type: 0 }, (response) => {
        let res = response.data
        if (res.status_code == 0) {
          res.data.tickets.forEach(item => {
            item.start = new Date(item.send_start_time * 1000).Format('yyyy.MM.dd')
            item.end = new Date(item.send_end_time * 1000).Format('yyyy.MM.dd')
          });
          this.card_arr = res.data.cards
          this.ticket_arr = res.data.tickets
          this.card_length = this.card_arr.length
          this.ticket_length = this.ticket_arr.length
          //   if (this.card_length > 3) {
          //     this.card_arr = res.data.card.slice(0, 3)
          //   } else {
          //     this.card_arr = res.data.card
          //   }
          //   if (this.ticket_length > 3) {
          //     this.ticket_arr = res.data.ticket.slice(0, 3)
          //   } else {
          //     this.ticket_arr = res.data.ticket
          //   }

        }

      })
    },
    delete_item ({ type, item }) {
      let that = this
      common.fly_post('/api/v4_2/card_ticket/delete_card', {
        type: type,
        id: item.id
      }, result => {
        let res = result.data
        if (res.status_code == '0') {
          wx.showToast({
            title: '删除成功', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => {
              that.get_data()
            }
          });
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  .top {
    height: 40px;
    line-height: 40px;
    padding-right: 15px;
    .disabled {
      float: right;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .section {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 0 15px;
    .header {
      height: 60px;
      width: 100%;
      .left {
        float: left;
        .icon {
          width: 25px;
          height: 20px;
          display: inline-block;
          vertical-align: middle;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .msg {
          display: inline-block;
          vertical-align: middle;
          line-height: 60px;
          font-size: 14px;
          margin-left: 5px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
      }
      .right {
        float: right;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 60px;
        .icon {
          width: 20px;
          display: inline-block;
          vertical-align: middle;
          margin-left: -5px;
          .img {
            width: 100%;
            display: block;
          }
        }
      }
    }
    .i-swipeout-demo-button-group {
      position: relative;
      height: 100%;
      .img-icon {
        width: 44px;
        display: block;
        margin: 28px auto;
      }
    }
  }
  .card_section {
    .card-list {
      ._i-swipeout {
        .list-item {
          height: 100px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          position: relative;
          margin-bottom: 10px;
          .title {
            position: absolute;
            top: 15px;
            left: 15px;
            .msg {
              font-size: 22px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              display: inline-block;
              vertical-align: middle;
            }
            .line {
              width: 1px;
              height: 18px;
              background: rgba(255, 255, 255, 1);
              opacity: 0.6022;
              display: inline-block;
              vertical-align: middle;
              margin: 0 10px;
            }
            .logo {
              width: 67px;
              display: inline-block;
              vertical-align: middle;
              .img {
                width: 100%;
              }
            }
          }
          .price {
            position: absolute;
            bottom: 10px;
            left: 15px;
            .icon {
              font-size: 17px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              vertical-align: bottom;
              display: inline-block;
            }
            .num {
              font-size: 25px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              vertical-align: bottom;
              display: inline-block;
              line-height: 30px;
              margin-left: -1px;
            }
          }
          .status-icon {
            width: 55px;
            height: 55px;
            position: absolute;
            right: 5px;
            top: 5px;
            .img {
              width: 100%;
            }
          }
          //   项目卡
          &.project {
            background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/xiangmuxiao.png);
          }
          //   亲友卡
          &.friends {
            background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/qinyouxiao.png);
          }
          //   加盟卡
          &.partner {
            background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/jiamengxiao.png);
          }
          //   超级会员卡
          &.super-vip {
            background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/chaoji小.png);
          }
          //   黑金卡
          &.black-gold {
            background-image: url(https://h5.ameimeika.com/mp_images/mp_2.4/card/heijxiao.png);
            .title {
              .msg {
                font-size: 22px;
                font-family: "PingFangSC-Medium";
                font-weight: 500;
                color: rgba(219, 177, 120, 1);
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
        &:last-of-type {
          .list-item {
            margin-bottom: 20px;
          }
        }
      }
    }
  }
  .ticket_section {
    .ticket-list {
      ._i-swipeout {
        .list-item {
          display: flex;
          width: 100%;
          height: 94px;
          box-sizing: border-box;
          margin-bottom: 12px;
          .left-detail {
            flex: 1;
            height: 100%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.17);
            border-radius: 8px 0 0 8px;
            overflow-y: hidden;
            display: flex;
            padding: 13px 0 14px;
            box-sizing: border-box;
            .left {
              width: 40%;
              height: 100%;
              border-right: 1px dashed #ccc;
              position: relative;
              .price {
                font-size: 26px;
                font-family: "Medium";
                font-weight: 500;
                color: rgba(255, 56, 62, 1);
                text-align: center;
                line-height: 28px;
                margin-top: 10px;
              }
              .tip {
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                text-align: center;
              }
              .special {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .tip-t,
                .tip-b {
                  font-size: 14px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 56, 62, 1);
                  line-height: 20px;
                  text-align: center;
                }
              }
            }
            .right {
              flex: 1;
              height: 67px;
              padding-left: 12px;
              .name {
                width: 100%;
                box-sizing: border-box;
                overflow: hidden;
                margin-bottom: 4px;
                .type {
                  float: left;
                  // display: inline-block;
                  padding: 0 6px;
                  height: 18px;
                  line-height: 18px;
                  text-align: center;
                  background: rgba(254, 106, 156, 1);
                  border-radius: 11px;
                  font-size: 8px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 255, 255, 1);
                  vertical-align: middle;
                }
                .ticket-name {
                  float: left;
                  font-size: 12px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(51, 51, 51, 1);
                  line-height: 18px;
                  margin-left: 5px;
                  // display: inline-block;
                  vertical-align: middle;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                }
              }
              .descript {
                height: 28px;
                min-width: 140px;
                font-size: 10px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                line-height: 14px;
                color: rgba(102, 102, 102, 1);
                .tip {
                  color: #ff383e;
                }
              }
              .date {
                font-size: 10px;
                margin-top: 4px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
              }
            }
          }
          .right-btn {
            width: 56px;
            height: 94px;
            position: relative;
            background: rgba(254, 106, 156, 1);
            box-shadow: 3px 2px 8px 0px rgba(0, 0, 0, 0.17);
            border-radius: 0 8px 8px 0;
            .msg {
              width: 100%;
              font-size: 12px;
              font-family: "PingFangSC-Medium";
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              text-align: center;
            }
            .icon {
              height: 100%;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(-50%, -50%);
              z-index: 10;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding: 20px 0;
              .circle {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: rgba(243, 244, 246, 1);
              }
            }
            &::before {
              content: "";
              width: 16px;
              height: 16px;
              display: block;
              border-radius: 50%;
              position: absolute;
              top: 0;
              left: 0;
              transform: translate(-50%, -50%);
              background-color: #fff;
              z-index: 20;
            }
            &::after {
              content: "";
              width: 16px;
              height: 16px;
              display: block;
              border-radius: 50%;
              position: absolute;
              bottom: 0;
              left: 0;
              transform: translate(-50%, 50%);
              background-color: #fff;
              z-index: 20;
            }
          }
          &:last-of-type {
            margin-bottom: 20px;
          }
          &.used {
            opacity: 0.5;
          }
          &.expire {
            filter: grayscale(1);
          }
        }
        &:last-of-type {
          .list-item {
            margin-bottom: 20px;
          }
        }
      }
    }
  }
  .empty {
    width: 154px;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    .nothing {
      width: 128px;
      height: 114px;
      margin: 0 auto;
      display: block;
    }
    .text {
      width: 100%;
      font-size: 14px;
      font-weight: 400;
      margin-top: 13px;
      color: rgba(153, 153, 153, 1);
      text-align: center;
    }
  }
}
</style>


